<template>
	<!--教师 预习/作业/考试 答题统计页面-->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center mance_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub mance_fd0_0'>
					<view class='flex flex-wrap align-center mance_fd0_0_c0'>
						<text class='fu-iconfont2  mance_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='mance_fd0_0_c1_c0'>{{name}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end mance_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

			<view class="result-content">
				<!-- 左右布局 -->
				<!-- <view class="result-fen flex ">
					<view class="left">
						<view class="name">
							{{objData.title}}
						</view>
						<view class="time">
							提交时间：{{type!=3?objData.submission_time:objData.create_time}}
						</view>
					</view>
					<view class="" style="margin-left: auto;">
						<view class="zong">
							{{type!=3?objData.score:objData.total_score}} <span style="font-size: 32rpx;margin-left: 10rpx;">分</span>
						</view>
						<view class="dui" v-if="objData.comment">
							正确率<span class="num"> {{objData.accuracy_rate}}</span>
							<span style="margin-right: 44rpx">%</span> <text v-if="type==3">用时 <span class="num">{{objData.use_time}}</span></text>
						</view>
					</view>
					
				</view> -->
				<view class="result-fen  ">
					<view class="title">
						{{objData.title}}
					</view>
					<view class="time">
						提交时间：{{type!=3?objData.submission_time:objData.create_time}}
					</view>
					<view class="zong">
						{{type!=3?objData.score:objData.total_score}} <span style="font-size: 32rpx;margin-left: 10rpx;">分</span>
					</view>
					<view class="dui" v-if="objData.comment">
						正确率<span class="num"> {{objData.accuracy_rate}}</span>
						<span style="margin-right: 44rpx">%</span> <text v-if="type==3">用时 <span class="num">{{objData.use_time}}</span></text>
					</view>
					
				</view>

				<view class="answer-sheet">
					<view class="title">
						<view class="">
							答题卡
						</view>
						<div class="title-right">
							<div class="yuna"></div>
								已评({{objData.graded_num}})
								<div class="yuna" style="background: #FD762E;"></div>
								未评({{objData.not_graded_num}})
								<!-- <div class="yuna" style="background: #C9D3E3;"></div> -->
								<!-- 未计分({{objData.unanswered_num}}) -->
						<!-- 	<div class="yuna"></div>
							做对({{objData.correct_num}})
							<div class="yuna" style="background: #FD762E;"></div>
							做错({{objData.error_num}})
							<div class="yuna" style="background: #C9D3E3;"></div>
							未计分({{objData.unanswered_num}}) -->
						</div>
					</view>

					<view class="answer-content">
						<view class="">
							<!-- <div class="type"> 单选题（5/40）</div> -->
							<div class="content">
								
								<div  @tap.stop="goNext(index)"
									:class="(item.is_answer == '1' || item.is_answer == '2') ? 'content-ite-dui' : item.is_answer == 3 ? 'content-ite-cuo' : 'content-ite-wei'"
									class="content-ite" v-for="(item ,index) in objData.questions" :key="index">
									{{index+1}}
								</div>
							</div>
						</view>
					</view>
				</view>

			</view>

			<!---flex布局flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3"
				:style=" {height:(150+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<view class="detaile" @tap.stop="jump">
					查看详情
				</view>
				<view class="detaile" @tap.stop="py" v-if="objData.comment">
					查看评语
				</view>
				<!-- <text @tap.stop="goBack" class="top">返回</text>
				<text class="next" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/exam/answerKey/answerKey?examlog_id=${examlog_id}`">查看解析</text> -->
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>


<script>
	export default {
		data() {
			return {
				list: [],
				name: "",
				aid: "",//学生作业id
				homeworkreleaserecord_id:'',//作业发布记录id
				user_id:'',//学生id
				examlog_id: "",
				objData: {},
				homework_id:'',
				isgraded:false,//是否批改
				type:1,//3 考试 其他是作业和预习
				papercourse_id:'',//	考试id
			};
		},
		onLoad(options) {
			this.aid = options.aid
			this.homeworkreleaserecord_id = options.homeworkreleaserecord_id
			this.homework_id=options.homework_id
			this.user_id=options.uid
			this.name=options.name
			this.type=options.type?options.type:1
			if(this.type==3){
				this.user_id=options.uid
				this.papercourse_id=options.papercourse_id
				this.getksdtk()
				// return
			}else{
				this.get_exam_result()
			}
			
			// uni.$on('',)
			let _this=this
			// 教师提交评语
			uni.$on('addpy', (data) => {
				console.log(_this.type)
				if(_this.type==3){
					_this.getksdtk()
					return
				}
				_this.get_exam_result()
			});
		},
		onShow() {
			if(!this.homeworkreleaserecord_id){
				return
			}
			if(this.type==3){
				this.getksdtk()
			}else{
				this.get_exam_result()
			}
			
		},
		onUnload() {
			uni.$off('addpy');
		},
		mounted() {},
		methods: {
			
			// 预习跟作业的答题卡
			async get_exam_result() {
				let res = await this.$api.post(global.apiUrls.post68d0be47e32b6, {
					homeworkreleaserecord_id: this.homeworkreleaserecord_id,
					user_id:this.user_id
				});

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}

				this.objData = res.data.data
				this.isgraded=res.data.data.comment
				console.log('llllllllllllll', res.data.data);
			},
			//考试的答题卡
			async getksdtk(){
				let res = await this.$api.post(global.apiUrls.post68e77b6c0b5f2, {
					papercourse_id: this.papercourse_id,
					user_id:this.user_id
				});
				
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				
				this.objData = res.data.data.info
				this.objData.questions = res.data.data.list
				this.isgraded=res.data.data.info.comment
				// this.isgraded=res.data.data.comment
				console.log('llllllllllllll', res.data.data);
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面，默认就是 1
				});
			},
			jump(){
			    
				if(this.type==3){
					uni.navigateTo({
						url:'/pages/kc/teacherdtxq/teacherdtxq?papercourse_id='+this.papercourse_id+'&uid='+this.user_id+'&aid='+this.aid+'&name='+this.name+'&type='+this.type+'&isgraded='+this.isgraded
					})
				}else{
					uni.navigateTo({
						url:'/pages/kc/teacherdtxq/teacherdtxq?homeworkreleaserecord_id='+this.homeworkreleaserecord_id+'&uid='+this.user_id+'&homework_id='+this.objData.homework_id+'&aid='+this.aid+'&name='+this.name+'&type='+this.type+'&isgraded='+this.isgraded
					})
				}
			},
			// goNext(val) {
			// 	this.$urouter.navigateTo(`/pages/exam/answerKey/answerKey?examlog_id=${this.examlog_id}&index=${val}`);
			// },
			goNext(val){
				if(this.type==3){
					uni.navigateTo({
						url:'/pages/kc/teacherdtxq/teacherdtxq?papercourse_id='+this.papercourse_id+'&uid='+this.user_id+'&aid='+this.aid+'&name='+this.name+'&index='+val+'&type='+this.type+'&isgraded='+this.isgraded
					})
				}else{
					uni.navigateTo({
						url:'/pages/kc/teacherdtxq/teacherdtxq?homeworkreleaserecord_id='+this.homeworkreleaserecord_id+'&uid='+this.user_id+'&homework_id='+this.objData.homework_id+'&aid='+this.aid+'&name='+this.name+'&index='+val+'&type='+this.type+'&isgraded='+this.isgraded
					})
				}
				
			},
			py(){
				let aid=this.aid
				if(this.type==3){
					aid=this.papercourse_id
				}
				uni.navigateTo({
					url:'/pages/kc/teacherjspy/teacherjspy?aid='+aid+'&uid='+this.user_id+'&usertype='+this.type+'&title='+this.objData.comment
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));

		background-image: url('@/static/exam/bj.png');
		background-size: 100% 600rpx;
		background-repeat: no-repeat;

	}

	.result-content {
		margin-top: 85rpx;

		.result-fen {
			margin: 0 48rpx;
			.left{
				margin-top: 88rpx;
				color: #FFFFFF;
				font-size: 36rpx;
				
			}
			
			.title{
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.time{
				font-weight: bold;
				font-size: 26rpx;
				color: #B5D3FB;
				margin-top: 10rpx;
			}
			.zong {
				font-weight: bold;
				font-size: 100rpx;
				color: #FFFFFF;
			}

			.dui {
				margin-top: 35rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #B5D3FB;

				.num {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					margin: 0 4rpx 0 16rpx;
				}
			}
		}
	}

	// 答题卡
	.answer-sheet {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: 34rpx;
		padding: 32rpx 24rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			height: 50rpx;
			margin-bottom: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-right {
				display: flex;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 37rpx;
				align-items: center;

				.yuna {
					width: 16rpx;
					height: 16rpx;
					border-radius: 16rpx;
					background: #145EFD;
					margin-right: 12rpx;
					margin-left: 24rpx;
				}
			}
		}

		.answer-content {


			.type {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-top: 32rpx;
			}

			.content {
				margin-top: 36rpx;
				display: grid;
				flex-wrap: wrap;
				justify-content: space-between;
				grid-template-columns: repeat(auto-fill, 120rpx);

				.content-ite {
					width: 84rpx;
					height: 84rpx;
					border-radius: 84rpx;
					line-height: 84rpx;
					text-align: center;
					font-weight: 400;
					font-size: 32rpx;
					margin: 0 28rpx 36rpx;
				}

				.content-ite-dui {
					background: rgba(20, 94, 253, 0.1);
					border: 1rpx solid #145EFD;
					color: #145EFD;
				}

				.content-ite-cuo {
					background: rgba(253, 118, 46, 0.1);
					border: 1rpx solid #FD762E;
					color: #FD762E;
				}

				.content-ite-wei {
					background: rgba(201, 211, 227, 0.1);
					border: 1rpx solid #C9D3E3;
					color: #C9D3E3;
				}
			}
		}

	}


	.coursePro_flex_3 {
		width: 750rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;
		justify-content: center;
		box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
		.detaile{
			width: 45%;
			height: 84rpx;
			color: #FFFFFF;
			background: #145EFD;
			text-align: center;
			line-height: 84rpx;
			border-radius: 12rpx;
			font-size: 36rpx;
			margin:  0 auto;
		}
		.coursePro_fd3_0 {
			font-weight: 400;
			font-size: 28rpx;
			color: #145EFD;
			border-radius: 44rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;

		}

		.top {
			width: 257rpx;
			height: 84rpx;
			background: #FFFFFF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			border: 1rpx solid #145EFD;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #145EFD;
			margin-right: 24rpx;
		}

		.next {
			width: 257rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #fff;
			margin-right: 24rpx;
		}
	}



	.mance_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
	}

	.mance_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #fff;
		line-height: 50rpx;
	}

	.mance_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #fff;
	}

	.mance_fd0_0_c0 {
		width: 120rpx;
	}

	.mance_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>